<template>
    <div class="login" :style="styleObj1">
        <section class="form-container">
            <div class="manager-tip">
                <span class="title">在线后台管理系统</span>
            </div>
        <el-form :model="loginUser" status-icon :rules="rules" ref="loginForm" label-width="60px" class="loginForm">
            <el-form-item label="邮箱" prop="email">
                <el-input type="text" v-model="loginUser.email" placeholder="请输入邮箱地址"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginUser.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="submit-btn" @click="submitForm('loginForm')">登录</el-button>
            </el-form-item>
            <div class="tiparea">
                <p>还没有账号?现在<router-link to="/register">注册</router-link></p>
            </div>
        </el-form>
        </section>
    </div>
</template>

<script>
    import jwt_decode from 'jwt-decode';
    import bg from '../assets/bg.jpg';
    export default {
        name: "login",
        components:{},
        data(){
            return{
                styleObj1:{'background-image' : `url(${bg})`},
                loginUser:{
                    email:'',
                    password:'',
                },
                rules:{     // 验证表单规则
                    email:[{
                        type:'email', required:true, message:'邮箱格式不正确', trigger:'blur'
                    }],
                    password:[{
                        required:true, message:'密码不能为空', trigger:'blur'
                    },
                        {
                        min:6, max:30 , message:'长度在6-30之间', trigger:'blur'
                    }],
                }
            }
        },
        methods:{
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('/api/users/login', this.loginUser).then(res => {
                            // token
                            const {token} = res.data;
                            // 存储到localstorage中
                            localStorage.setItem('eleToken', token);
                            // 解析token
                            const decoded = jwt_decode(token);
                            // token存储到vuex中
                            this.$store.dispatch('setAuthenticated', !this.isEmpty(decoded));
                            this.$store.dispatch('setUser', decoded);

                            this.$router.push('/index');
                        });
                    }
                });
            },
            isEmpty(value) {
                return (
                    value === undefined ||
                    value === null ||
                    (typeof value === 'object' && Object.keys(value).length ===0) ||
                    (typeof value === 'string' && value.trim().length === 0)
                );
            }
        }
    }
</script>

<style scoped>
    .login{
        position: relative;
        width: 100%;
        height: 1000px;
        background: no-repeat center center;
        background-size: 100% 100%;
    }
    .form-container{
        width: 370px;
        height: 210px;
        position: absolute;
        top: 10%;
        left: 34%;
        padding: 25px;
        border-radius: 5px;
        text-align: center;
    }
    .form-container .manager-tip .title{
        font-family: 'Microsoft YaHei UI';
        font-weight: bold;
        font-size: 26px;
        color: #fff;
    }
    .loginForm{
        margin-top: 20px;
        background-color: #fff;
        padding:20px 40px 20px 20px;
        border-radius: 5px;
        box-shadow: 0px 5px 10px #ccc;
    }
    .submit-btn{
        width: 100%;
    }
    .tiparea{
        text-align: right;
        font-size: 12px;
        color: #333;
    }
    .tiparea p a{
        color: #409eff;
    }

</style>